<template>
  <div class="container">
    <el-card id="dialogContent">
      <el-row :gutter="10">
        <!-- title -->
        <el-col class="title" :span="24">
          <h2>费用明细单</h2>
        </el-col>
        <!-- title1 -->
        <el-col :span="24">
          <p style="margin-bottom: 0">制表单位 : 三峡电能(云南)有限公司</p>
        </el-col>
        <!-- conent -->
        <el-col :span="24" class="conent">
          <!-- input -->
          <el-row :gutter="10">
            <el-col class="box_input" :span="8">
              <p>结算用户 : {{ "云南西渚工业园" }}</p>
              <p>联系人 : {{ "云南西渚工业园" }}</p>
              <p>收入金额 : {{ "云南西渚工业园" }}</p>
            </el-col>
            <el-col class="box_input" :span="8">
              <p>联系电话 : {{ "云南西渚工业园" }}</p>
              <p>时间周期 : {{ "云南西渚工业园" }}</p>
              <p>支出金额 : {{ "云南西渚工业园" }}</p>
            </el-col>
            <el-col :span="8">
              <div style="margin-left: 20%; margin-top: 10px">
                <img
                  style="width: 100px; height: 100px"
                  src="/img/weixin.png"
                  alt=""
                />
              </div>
            </el-col>
          </el-row>
          <!-- table -->
          <el-col style="margin-bottom: 50px" :span="24">
            <el-table
              :span-method="objectSpanMethod"
              :data="tableData"
              style="width: 100%"
            >
              <el-table-column prop="date" label="费用类型" width="180">
              </el-table-column>
              <el-table-column prop="name" label="计量点" width="180">
              </el-table-column>
              <el-table-column prop="address" label="金额"> </el-table-column>
              <el-table-column prop="time" label="时间"> </el-table-column>
              <el-table-column prop="text" label="费用说明"> </el-table-column>
            </el-table>
          </el-col>
        </el-col>
        <el-col :span="12">经办人:李斌</el-col>
        <el-col style="text-align: right" :span="12"
          >制表时间:2020-09-27</el-col
        >
      </el-row>
    </el-card>
    <div style="width: 100%; text-align: center">
      <el-button size="small" type="success" v-print="printObj"
        >确认打印</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "print",
  data() {
    return {
      printObj: {
        id: "dialogContent", //打印标签的id
        popTitle: "费用明细单", //文件标题
      },
      tableData: [
        {
          date: "线上充值1",
          name: "1001室",
          address: "123",
          time: "20200927",
          text: "张三充值100元",
        },
        {
          date: "线上充值2",
          name: "1001室",
          address: "123",
          time: "20200927",
          text: "张三充值100元",
        },
        {
          date: "线下充值3",
          name: "1001室",
          address: "123",
          time: "20200927",
          text: "张三充值100元",
        },
        {
          date: "线上充值4",
          name: "1001室",
          address: "123",
          time: "20200927",
          text: "张三充值100元",
        },
        {
          date: "用电费用",
          name: "1001室",
          address: "123",
          time: "20200927",
          text: "张三充值100元",
        },
        {
          date: "用电费用",
          name: "1001室",
          address: "123",
          time: "20200927",
          text: "张三充值100元",
        },
        {
          date: "",
          name: "支出合计",
          address: "123",
          //   time: "20200927",
          //   text: "张三充值100元",
        },
        {
          date: "",
          name: "账户余额",
          address: "123",
          //   time: "20200927",
          //   text: "张三充值100元",
        },
      ],
    };
  },
  mounted() {},
  watch: {},
  methods: {
    print() {
      window.print();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.conent {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}
.title {
  text-align: center;
  h2 {
    margin-top: 0;
  }
}

.box_input {
  p {
    font-size: 12px;
    margin-bottom: 30px;
  }
}
</style>